<template>
  <page-view>
    <el-card header="分类信息汇总">
      <el-row :gutter="0" class="flex flex-row justify-evenly h-[70px] bg-gray-50">
        <el-col :xs="4" :sm="5" :md="4" :lg="6">
          <div class="h-full flex flex-col items-center justify-center font-bold text-[18px]">
            <div>用户总数</div>
            <div>{{ ~~(resultData.totalUserCounts) }}</div>
          </div>
        </el-col>
        <el-col :xs="4" :sm="5" :md="4" :lg="6">
          <div class=" h-full flex flex-col items-center justify-center font-bold text-[18px]">
            <div>菜品总数</div>
            <div>{{ ~~(resultData.totalFoodCounts) }}</div>
          </div>
        </el-col>
        <el-col :xs="4" :sm="5" :md="4" :lg="6">
          <div class=" h-full flex flex-col items-center justify-center font-bold text-[18px]">
            <div>订单总数</div>
            <div>{{ ~~(resultData.totalOrderCounts) }}</div>
          </div>
        </el-col>
        <el-col :xs="4" :sm="5" :md="4" :lg="6">
          <div class=" h-full flex flex-col items-center justify-center font-bold text-[18px]">
            <div>总金额数</div>
            <div>{{ resultData.totalMoneyCounts }}元</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card header="订单信息展示">
      <div class="flex flex-row justify-between justify-center items-center bg-gray-50">
        <div ref="main" class="h-[460px] w-[850px] border border-gray-300"></div>
        <div ref="main1" class="h-[460px] w-[750px]  border border-gray-300"></div>
      </div>
    </el-card>
  </page-view>
</template>
  
<script setup>
import API from '../utils/API';
import { ref, reactive, onMounted } from "vue";
import * as echarts from 'echarts';



const main = ref();
const main1 = ref();


const resultData = reactive({
  totalUserCounts: 0,
  totalFoodCounts: 0,
  totalOrderCounts: 0,
  totalMoneyCounts: 0
})



const getDataCount = () => {
  API.adminInfo.getTotalInfo().then((result) => {
    // console.log(result)
    resultData.totalMoneyCounts = result.money_total;
    resultData.totalFoodCounts = result.food_total;
    resultData.totalOrderCounts = result.order_total;
    resultData.totalUserCounts = result.user_total;
  })
}



const animations = (option, main, arr) => {
  let currentIndex = -1;
  const myChart = echarts.init(main.value);
  setInterval(() => {
    let dataLen = option.series[0].data.length;
    // 取消之前高亮的图形
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: currentIndex
    });
    currentIndex = (currentIndex + 1) % dataLen;
    // 高亮当前图形
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: currentIndex
    });
    // 显示 tooltip
    myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: currentIndex
    });
  }, 1000);
  API.adminInfo.getCategoryFoodCount().then(result => {
    result.forEach(item => {
      let obj = {
        value: item.category_food_count,
        name: item.category_name
      };
      option.series[0].data.push(obj);
    })
  }).finally(() => {
    myChart.setOption(option);
  })
}

const init = () => {
  const myChart = echarts.init(main.value);
  let option1 = {
    title: {
      text: '菜品分类环形图',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '菜品分类 </br>{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      x: 'left',
      data: []
    },
    series: [
      {
        type: 'pie',
        radius: ['35%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          show: false
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '20',
            fontWeight: 'bold'
          },
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.6)'
          }
        },
        data: []
      }
    ]
  }
  animations(option1, main, option1.legend);
};
const init1 = () => {
  const myChart = echarts.init(main1.value);
  let option2 = {
    title: {
      text: '菜品分类柱形图',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}'
    },
    xAxis: {
      data: []
    },
    yAxis: {},
    series: [
      {
        type: 'bar',
        data: [],
        barWidth: '60%'
      }
    ],
    emphasis: {
      label: {
        show: true,
        fontSize: '10',
        fontWeight: 'bold'
      },
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    },
  }
  animations(option2, main1, option2.xAxis);
}
onMounted(() => {
  getDataCount();
  init();
  init1();
})
</script>
  
<style scoped lang="scss">
:deep(.box) {
  @apply bg-orange-200 flex flex-col justify-center items-center w-[400px] h-full;

  &:hover {
    cursor: pointer;
    box-shadow: 0 0 5px 2px lightgray;
  }

  :deep(.inner-number) {
    @apply flex flex-row justify-center items-center;
  }
}
</style>